<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <form action="" id="form_data">
        <input type="text" name="user">
        <input type="password" name="password">
        <button type="submit">提交</button>
    </form>

    <script>
        //  const fd = new FormData(form);
        //     fd.append('name', '老刘');
        //     fd.append('user', '登入');
        //     fd.append('id', 3);

        //     const xhr = new XMLHttpRequest();
        //     xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata');
        //     xhr.send(fd);
        //     xhr.onreadystatechange = function () {
        //         if (xhr.readyState == 4 && xhr.status == 200) {
        //             console.log(JSON.parse(xhr.responseText));
        //         }
        //     }

        let form = document.getElementById('form_data');
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            const fd = new FormData(form);
            const xhr = new XMLHttpRequest();
            xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata');
            xhr.send(fd);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(JSON.parse(xhr.responseText));
                }
            }
        });


        // // 获取表单元素
        // var form = document.querySelector('#form1')
        // // 监听表单元素的 submit 事件
        // form.addEventListener('submit', function (e) {
        //     e.preventDefault()
        //     // 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
        //     var fd = new FormData(form)
        //     var xhr = new XMLHttpRequest()
        //     xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
        //     xhr.send(fd)
        //     xhr.onreadystatechange = function () { }
        // })
    </script>
</body>

</html>